<template>
    <div class="fillcontain">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item style="float:right">
                <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增</el-button>
            </el-form-item>
        </el-form>

        <div class="table_container">
            <el-table :data="tableData" highlight-current-row style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="创建时间">
                                <span>{{ props.row.djsj }}</span>
                            </el-form-item>
                            <el-form-item label="审核时间">
                                <span>{{ props.row.shsj }}</span>
                            </el-form-item>
                            <el-form-item label="原因">
                                <span>{{ props.row.reason }}</span>
                            </el-form-item>
                            <el-form-item label="创建人ID">
                                <span>{{ props.row.czrId }}</span>
                            </el-form-item>
                            <el-form-item label="创建人名称">
                                <span>{{ props.row.czrName }}</span>
                            </el-form-item>
                            <el-form-item label="单据项目ID">
                                <span>{{ props.row.itemId }}</span>
                            </el-form-item>
                            <el-form-item label="储值卡账户ID">
                                <span>{{ props.row.accountId }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="index" width="100"></el-table-column>
                <el-table-column property="id" label="单据ID" width="160"></el-table-column>
                <el-table-column property="hyPhone" label="会员手机号" width="160"></el-table-column>
                <el-table-column property="hyName" label="会员名称" width="160"></el-table-column>
                <el-table-column property="statusText" label="状态" width="160"></el-table-column>

                <el-table-column property="tzje" label="修补金额">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <!-- {{scope.row.status}} -->
                        <!-- <el-button type="text" size="small">查看</el-button> -->
                        <el-button v-if="scope.row.status==0" @click="repairClick(scope.row)" type="text" size="small">审核</el-button>
                        <el-button v-if="scope.row.status==0" @click="sp_repair_delClick(scope.row)" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="count">
                </el-pagination>
            </div>
        </div>
        <!-- Form -->
        <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->

        <el-dialog title="创建修补单" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
            <el-form :model="addform">
                <!-- accountId：储值账户ID
	cardUnitId：发卡机构ID
	tzje：调整金额
	hyId：会员ID
	reason：原因 -->
                <el-form-item label="储值账户ID" :label-width="formLabelWidth">
                    <el-input v-model="addform.accountId" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="发卡机构ID" :label-width="formLabelWidth">
      <el-input v-model="addform.cardUnitId" auto-complete="off"></el-input>
    </el-form-item> -->
                <el-form-item label="调整金额" :label-width="formLabelWidth">
                    <el-input v-model="addform.tzje" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="会员ID" :label-width="formLabelWidth">
                    <el-input v-model="addform.hyId" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="原因" :label-width="formLabelWidth">
                    <el-input type="textarea" :row="2" v-model="addform.reason" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="addform.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 110px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>

<script>
import headTop from '../components/headTop'
import { getUserList, getUserCount } from '@/api/getData'
import { getRepairBills, insertRepairBill, repair,sp_repair_del } from '@/api/getData'
import { getStore } from '@/config/mUtils'
export default {
    data () {
        return {
            form: {
                phone: '',
                cardUnitId: '0'
            },
            unitArr: ['佳惠'],
            czlxArr: ['冻结', '解冻'],
            statusArr: ['保存', '已审核'],
            dialogFormVisible: false,
            fullscreenLoading: false,
            addform: {
                accountId: '',
                cardUnitId: '0',
                tzje: '',
                hyId: '',
                reason: '',
                token: '',
            },
            formLabelWidth: '120px',
            tableData: [
                //     {
                // //   registe_time: '2016-05-02',
                // //   username: '王小虎',
                // //   city: '上海市普陀区金沙江路 1518 弄'
                //     "je": '储值卡金额',
                //     "name": "姓名",
                //     "phone": "手机号",
                //     "hyId": "会员ID",
                //     "accountId": '账户ID',
                //     "cardUnitId": '发卡机构ID'
                // }, 
            ],
            currentRow: null,
            offset: 0,
            limit: 20,
            count: 0,
            currentPage: 1,
        }
    },
    components: {
        headTop,
    },
    created () {
        this.initData();
    },
    methods: {
        async initData () {
            this.getRepairBills();
            try {
                // const countData = await getUserCount();
                // if (countData.status == 1) {
                //     this.count = countData.count;
                // }else{
                //     throw new Error('获取数据失败');
                // }
            } catch (err) {
                console.log('获取数据失败', err);
            }
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange (val) {
            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            // this.getCustomers()
        },
        async getRepairBills () {
            const res = await getRepairBills({
                token: getStore('token'),
                phone: this.form.phone
            });
            console.log(res);

            if (res.retcode = '00') {
                // this.tableData = res.data;
                // this.count = res.data.length;
                this.tableData = [];
                if (res.data) {

                    this.count = res.data.length;

                    res.data.forEach(item => {
                        item.czlx = this.czlxArr[item.cardUnitId]
                        item.statusText = this.statusArr[item.status]
                        this.tableData.push(item)
                    })
                }
            } else {

            }
            // this.tableData = [];


        },
        // 修补单审核
        async repair (row) {
            console.log(row);

            const res = await repair({
                sheetId: row.id,
                token: getStore('token')
            });
            if (res.retcode == '00') {
                this.$message({
                    type: 'success',
                    message: '成功!'
                });
                this.getRepairBills();
                // this.tableData = res.data;
            } else {
                this.$message({
                    type: 'warning',
                    message: res.retmsg
                });
            }

        },
        // 删除修补单
        async sp_repair_del (row) {
            console.log(row);

            const res = await sp_repair_del({
                p_id: row.id,
                token: getStore('token')
            });
            if (res.retcode == '00') {
                this.$message({
                    type: 'success',
                    message: '成功!'
                });

                this.getRepairBills();
                
            } else {
                this.$message({
                    type: 'warning',
                    message: res.retmsg
                });
            }

        },
        //  创建修补单
        onAdd () {
            console.log('ddd');
            this.dialogFormVisible = true
            // this.getCustomers()
        },
        onSubmit () {
            console.log('ddd');
            this.getRepairBills()
        },
        addSubmit () {
            console.log('ddd');
            this.dialogFormVisible = false;
            this.openFullScreen2();
            this.insertRepairBill()
        },
        // 创建修补单
        async insertRepairBill () {
            const res = await insertRepairBill({
                accountId: this.addform.accountId,
                // cardUnitId:发卡机构ID
                tzje: this.addform.tzje,//调整金额
                hyId: this.addform.hyId,//会员ID
                reason: this.addform.reason,//原因
                phone: this.addform.phone,
                cardUnitId: this.addform.cardUnitId,
                token: getStore('token')
            });
            if (res.retcode == '00') {

                // this.tableData = res.data;
            } else {

            }

        },
        openFullScreen2 () {
            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
                this.loading.close();
            }, 2000);
        },
        handleClick (row) {
            console.log(row);


        },
        repairClick (row) {
            console.log('repairClick', row);
            if (row.status == '保存') {
                return
            }
            this.$confirm('此操作将审核通过, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.repair(row);//提交方法


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        sp_repair_delClick (row) {
            console.log('sp_repair_delClick', row);
            if (row.status == '保存') {
                return
            }
            this.$confirm('删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.sp_repair_del(row);//提交方法


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
                // this.getRepairBills();
            });


        },
    },
}
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
    padding: 20px;
}
</style>
